<template>
  <div>
    <el-row type="flex" justify="center">
      <el-col :span="6" :offset="1">
        <div>
          <el-input v-model="input" placeholder="请输入菜品名称"></el-input>
        </div>
      </el-col>
      <el-col :span="1">
        <div>
          <el-button type="primary">搜索</el-button>
        </div>
      </el-col>
      <el-col :span="2">
        <div>
          <el-button type="primary">新建菜品</el-button>
        </div>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <!-- 列表显示 -->
    <el-row type="flex" justify="center">
      <el-col :span="12">
        <template>
          <el-table :data="tableData" stripe class="tableBox" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="25"></el-table-column>
            <el-table-column prop="name" label="菜品名称"></el-table-column>
            <el-table-column prop="image" label="图片" align="center">
              <template slot-scope="{ row }">
                <el-image style="width: auto; height: 40px; border:none;cursor: pointer;" :src="getImage(row.image)"
                  :preview-src-list="[`/common/download?name=${row.image}`]">
                  <div slot="error" class="image-slot">
                    <img src="" style="width: auto; height: 40px; border:none;">
                  </div>
                </el-image>
              </template>
            </el-table-column>
            <el-table-column prop="categoryName" label="菜品分类"></el-table-column>
            <el-table-column label="售价">
              <template slot-scope="scope">
                <span style="margin-right: 10px;">￥{{ scope.row.price / 100 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="售卖状态">
              <template slot-scope="scope">
                <span style="margin-right: 10px;">{{ scope.row.status == '0' ? '停售' : '启售' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="160" align="center">
              <template slot-scope="scope">
                <el-button type="text" size="small" class="blueBug" @click="addFoodtype(scope.row.id)">
                  修改
                </el-button>
                <el-button type="text" size="small" class="blueBug" @click="statusHandle(scope.row)">
                  {{ scope.row.status == '0' ? '启售' : '停售' }}
                </el-button>
                <el-button type="text" size="small" class="delBut non" @click="deleteHandle('单删', scope.row.id)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <!-- 分页 -->
    <el-row type="flex" justify="right">
      <el-col>
        <div>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="pageInfo.pageNum" :page-sizes="pageInfo.navigatepageNums" :page-size="pageInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
          </el-pagination>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { init } from 'events';
import { getDishPage } from '@/api/food';
export default {
  name: "DishList1View",
  data() {
    return {
      input: '',
      currentPage: 1,
      pageSize: 6,
      tableData: [],
      pageInfo:[],
    }
  },
  created() {
    this.initData()
  },
  methods: {

    // 初始化列表数据
    async initData() {
      const params = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        name: this.input ? this.input : undefined
      }
      await getDishPage(params).then(res => {
        if (String(res.status) === '200') {
          this.pageInfo=res.data.pageInfo
          this.tableData = res.data.pageInfo.list || []
          this.counts = res.data.pageInfo.total
        }
      }).catch(err => {
        this.$message.error('请求出错了：' + err)
      })
    },
    getImage(){},
    handleSelectionChange() {

    }
    ,
    handleSizeChange(val){
      console.log(`每页显示数：${val}`)
      this.pageSize=val
      this.initData();
    },
    //切换页数
    handleCurrentChange(val){
        console.log(`当前页：${val}`)
        this.currentPage=val
        this.initData();
    }
  }
}
</script>

<style scoped>
</style>